<style lang="scss">
  @import "~@/styles/base";

  .page {
    min-height: 100vh;
    .page-bind {
      background-color: #fff;
      border-radius: rpx(10);
      min-height: 100%;
      padding: rpx(70) rpx(40) rpx(50);
      .icon-fail {
        display: block;
        width: rpx(316);
        height: rpx(283);
        margin-left: auto;
        margin-right: auto;
      }
      .tip {
        padding-top: rpx(55);
        font-size: rpx(34);
        line-height: rpx(54);
        text-align: center;
        color: $black;
      }
      .tip-desc {
        padding-bottom: rpx(60);
        font-size: rpx(24);
        color: $light-black;
        line-height: rpx(54);
        text-align: center;
      }
      .title {
        padding-top: rpx(30);
        font-size: rpx(24);
        color: $black;
        line-height: rpx(60);
        font-weight: bold;
      }
      .content {
        font-size: rpx(24);
        color: #30373f;
        line-height: rpx(44);
      }
      .warning {
        display: flex;
        align-items: center;
        width: rpx(636);
        height: rpx(48);
        margin-top: rpx(40);
        line-height: rpx(48);
        padding-left: rpx(25);
        border: rpx(1) solid #cf8383;
        background-color: #f0d7d7;
        border-radius: rpx(24);
        font-size: rpx(24);
        color: #cf8383;
        img {
          margin-right: rpx(20);
          width: rpx(26);
          height: rpx(26);
        }
      }
      .btn-link {
        display: block;
        margin: rpx(30) auto rpx(70);
        font-size: rpx(24);
        color: $light-black;
        border: rpx(1) solid $light-black;
        width: rpx(256);
        height: rpx(52);
        line-height: rpx(52);
        text-align: center;
        border-radius: rpx(26);
        box-shadow: 0 rpx(2) rpx(5) rgba(177, 187, 198, 0.32);
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-bind">
      <img class="icon-fail" src="/static/img/bind/fail.png">
      <div class="tip">Wi-Fi配置失败</div>
      <div class="tip-desc">请检查当前机器W-iFi灯状态</div>
      <div class="title">Wi-Fi灯变为缓慢闪烁</div>
      <div class="content">
        1.请检查WiFi路由器是否可以正常上网或者网速太慢，改善后课尝试重新进行配网
      </div>
      <div class="title">Wi-Fi消失不显示或一直快速闪烁</div>
      <div class="content">
        <div>1.请检查是否输入了错误的WiFi密码</div>
        <div>2.请检查是否选用了5G的WiFi网络</div>
        <div>3.尝试关闭手机移动网络，再产能更新进行配网</div>
        <div>4.请检查路由器是否连接太多设备，导致其他WiFi设备无法</div>
        加入
      </div>
      <div class="warning"><img src="/static/img/bind/warning.png">断开设备电源再通电可以退出配网模式</div>
      <div class="btn-link" @click="toGuide">查看配网演示视频</div>
      <div class="btn" @click="toTry">重试</div>
    </div>
  </div>
</template>

<script>
  import {toGuide} from 'utils'

  export default {
    data() {
      return {};
    },
    components: {},
    methods: {
      toGuide,
      toTry(){
        wx.navigateTo({
          url: '/bind/pages/step4/main'
        })
      }
    },
    async onShow() {
    }
  };
</script>
